import React, { PureComponent } from 'react';
import moment from 'moment';
import { connect } from 'dva';
import {
  Table,
  Card,
  Row,
  Col,
  Radio,
  Input,
  Button,
  Icon,
  DatePicker,
  Tooltip,
  Menu,
  Dropdown,
  Divider,
  Slider,
  InputNumber,
  Link,
  notification,
} from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import styles from '../List/BasicList.less';
import globalUtil from '../../utils/global';
import sourceUnit from '../../utils/source-unit';
import InvoiceForm from '../../components/InvoiceForm';

const { RangePicker } = DatePicker;

const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const { Search } = Input;

@connect(({ user, list, loading }) => ({
  user: user.currentUser,
  list,
  loading: loading.models.list,
}))
export default class BasicList extends PureComponent {
  constructor(props) {
    super(props);
    const format = 'YYYY-MM-DD';
    this.state = {
      dataCenter: null,
      disk: {},
      memory: {},
      time: '',
      buydisk: 0,
      buymemory: 0,
      buytime: 0,
      dateFormat: format,
      defaultStartDate: moment().format(format),
      defaultEndDate: moment()
        .add(30, 'day')
        .format(format),
      endDate: '',
      money: {},
    };
  }
  componentDidMount() {
    this.getRegionResource();
    //  this.getResPrice();
    //  this.buyPurchase();
  }

  getRegionResource() {
    const regionName = this.props.match.params.regionName;
    this.props.dispatch({
      type: 'global/getRegionSource',
      payload: {
        team_name: globalUtil.getCurrTeamName(),
        enterprise_id: this.props.user.enterprise_id,
        region: regionName,
      },
      callback: (data) => {
        if (data) {
          const endDateStr = data.bean.disk.expire_date || data.bean.memory.expire_date;
          const datas = {
            dataCenter: data.bean,
            disk: data.bean.disk,
            memory: data.bean.memory,
            buydisk: data.bean.disk.limit || 1,
            buymemory: data.bean.memory.limit || 1024,
          };
          if (endDateStr) {
            datas.defaultEndDate = moment(endDateStr).format('YYYY-MM-DD');
          }
          this.setState(datas, () => {
            this.getResPrice();
          });
        }
      },
    });
  }

  getResPrice() {
    const regionName = this.props.match.params.regionName;
    moment(this.state.endDate || this.state.defaultEndDate).diff(
      moment(this.state.defaultStartDate),
      'days',
    );
    this.props.dispatch({
      type: 'global/resPrice',
      payload: {
        team_name: globalUtil.getCurrTeamName(),
        region_name: regionName,
        memory: this.state.buymemory,
        disk: this.state.buydisk,
        rent_time: moment(this.state.endDate || this.state.defaultEndDate).diff(
          moment(this.state.defaultStartDate),
          'days',
        ),
      },
      callback: (data) => {
        if (data) {
          this.setState({ money: data.bean });
        }
      },
    });
  }

  buyPurchase = () => {
    const regionName = this.props.match.params.regionName;
    moment(this.state.endDate || this.state.defaultEndDate).diff(
      moment(this.state.defaultStartDate),
      'days',
    );
    this.props.dispatch({
      type: 'global/buyPurchase',
      payload: {
        team_name: globalUtil.getCurrTeamName(),
        region_name: regionName,
        memory: this.state.buymemory,
        disk: this.state.buydisk,
        rent_time: moment(this.state.endDate || this.state.defaultEndDate).diff(
          moment(this.state.defaultStartDate),
          'days',
        ),
      },
      callback: (data) => {
        this.getRegionResource();
        notification.success({ message: '包月成功' });
      },
    });
  };
  handleMemoryChange = (value) => {
    this.setState({ buymemory: value }, () => {
      this.getResPrice();
    });
  };
  handleDiskChange = (value) => {
    this.setState({ buydisk: value }, () => {
      this.getResPrice();
    });
  };
  handleDateChange = (d) => {
    this.setState({ endDate: d[1].format(this.state.dateFormat) }, () => {
      this.getResPrice();
    });
  };
  checkMemoryChange = (v) => {
    if (v < this.state.memory.limit) {
      this.setState({ buymemory: this.state.memory.limit || 1024 });
    } else {
      this.setState({ buymemory: v });
    }
  };
  checkDiskChange = (v) => {
    if (v < this.state.disk.limit) {
      this.setState({ buydisk: this.state.disk.limit || 1 });
    } else {
      this.setState({ buydisk: v });
    }
  };
  render() {
    const dataCenter = this.state.dataCenter;
    if (!dataCenter) return null;
    const usedDisk = this.state.disk.used || 0;
    const limitDisk = this.state.disk.limit || 0;
    const timeDisk = this.state.disk.expire_date || '未包月或已到期';
    const usedMemory = this.state.memory.used || 0;
    const limitMemory = this.state.memory.limit || 0;
    const timeMemory = this.state.memory.expire_date || '未包月或已到期';
    const memoryMasks = {};

    memoryMasks[usedMemory] = (
      <Tooltip title={`当前使用量: ${sourceUnit.unit(usedMemory, 'MB')}`}>
        <Icon type="up" />
      </Tooltip>
    );
    memoryMasks[limitMemory] = (
      <Tooltip title={`已包月: ${sourceUnit.unit(limitMemory, 'MB')}`}>
        <Icon type="up" />
      </Tooltip>
    );

    const diskMasks = {};
    diskMasks[usedDisk] = (
      <Tooltip title={`当前使用量: ${sourceUnit.unit(usedDisk, 'GB')}`}>
        <Icon type="up" />
      </Tooltip>
    );
    diskMasks[limitDisk] = (
      <Tooltip title={`已包月: ${sourceUnit.unit(limitDisk, 'GB')}`}>
        <Icon type="up" />
      </Tooltip>
    );
    const money = this.state.money;

    const pageHeaderContent = null;
    return (
      <PageHeaderLayout
        breadcrumbList={[
          {
            title: '首页',
            href: '/',
          },
          {
            title: '企业中心',
            href: `/team/${globalUtil.getCurrTeamName()}/region/${globalUtil.getCurrRegionName()}/finance`,
          },
          {
            title: `${this.state.dataCenter.alias || ''}`,
            href: '',
          },
        ]}
        content={pageHeaderContent}
      >
        <Card className={styles.listCard} bordered={false}>
          <div>
            <div>
              <h3>配置资源</h3>
              <Row>
                <Col span={2} style={{ fontSize: '16px', paddingTop: 8 }}>
                  内存
                </Col>

                <Col span={16}>
                  <Slider
                    tipFormatter={value => sourceUnit.unit(value, 'MB')}
                    value={this.state.buymemory || 1}
                    onChange={this.checkMemoryChange}
                    onAfterChange={this.handleMemoryChange}
                    step={512}
                    min={0}
                    max={1024 * 100}
                    marks={memoryMasks}
                  />
                </Col>
                <Col span={4} style={{ fontSize: '16px', paddingTop: 8 }}>
                  {' '}
                  {sourceUnit.unit(this.state.buymemory, 'MB')}{' '}
                </Col>
              </Row>
              <Row>
                <Col span={2} style={{ fontSize: '16px', paddingTop: 8 }}>
                  磁盘
                </Col>
                <Col span={16}>
                  <Slider
                    onChange={this.checkDiskChange}
                    tipFormatter={value => sourceUnit.unit(value, 'GB')}
                    value={this.state.buydisk || 1}
                    onAfterChange={this.handleDiskChange}
                    step={1}
                    min={0}
                    max={1024}
                    marks={diskMasks}
                  />
                </Col>
                <Col span={4} style={{ fontSize: '16px', paddingTop: 8 }}>
                  {' '}
                  {sourceUnit.unit(this.state.buydisk, 'GB')}
                </Col>
              </Row>
              <Row style={{ padding: '5px 0' }}>
                <Col span={2} style={{ fontSize: '16px' }}>
                  包月时长
                </Col>
                <Col span={22}>
                  <RangePicker
                    onChange={this.handleDateChange}
                    disabledDate={current =>
                      current < moment(this.state.defaultEndDate, this.state.dateFormat)
                    }
                    value={[
                      moment(this.state.defaultStartDate, this.state.dateFormat),
                      moment(
                        this.state.endDate || this.state.defaultEndDate,
                        this.state.dateFormat,
                      ),
                    ]}
                    format={this.state.dateFormat}
                  />
                </Col>
                <Col span={2} />
                <Col span={22} />
              </Row>
            </div>
            <Divider />
            <div>
              <h3>费用详情</h3>
              <p />
              <p>总费用： {money.total_fee || 0} 元</p>
              <p>已付费： {(money.total_fee - money.actual_fee || 0).toFixed(2)} 元</p>
              <p>应付费： {money.actual_fee || 0} 元</p>
            </div>
            <Row>
              <Col span="24">
                <Button onClick={this.buyPurchase} type="primary" style={{ marginRight: 8 }}>
                  确认购买
                </Button>
                <Button
                  onClick={() => {
                    history.back();
                  }}
                  style={{ marginRight: 8 }}
                >
                  返回
                </Button>
              </Col>
            </Row>
          </div>
        </Card>
      </PageHeaderLayout>
    );
  }
}
